<template>
  <div class="mainBox">
    <pageTitle Title="缓存管理"></pageTitle>
    <div class="tableBar">
      <table class="myTable">
        <tr v-for="index in Math.ceil(funcList.length / 2)">
          <td class="firstTd">{{ funcList[(index - 1) * 2].name }}</td>
          <td class="btnBox firstBtn">
            <el-button plain @click="renewFunc(funcList[(index - 1) * 2].api)"
              >更新</el-button
            >
          </td>
          <template v-if="funcList[(index - 1) * 2 + 1]">
            <td class="secTd">{{ funcList[(index - 1) * 2 + 1].name }}</td>
            <td class="btnBox secBtn">
              <el-button
                plain
                @click="renewFunc(funcList[(index - 1) * 2 + 1].api)"
                >更新</el-button
              >
            </td>
          </template>
        </tr>
      </table>
    </div>
    <cacheDia
      :show="show"
      :type="diaType"
      @closeDia="closeDia"
      @renewFunc="handleRenew"
    ></cacheDia>
  </div>
</template>

<script setup>
import cacheDia from '@/components/Cache/cacheDia.vue';
import cacheFunc from '@/Api/cache.js';
import { ElMessage } from 'element-plus';
const diaType = ref(''); //弹窗类型
const show = ref(false); //弹窗ref

//功能列表
const funcList = ref([
  {
    name: '更新广告',
    api: 'renewAd',
  },
  {
    name: '更新注册用户',
    api: 'renewUser',
  },
  {
    name: '更新手机号绑定次数',
    api: 'renewPhoneTime',
  },
  {
    name: '更新查分机构',
    api: 'renewUnits',
  },
  {
    name: '更新查分批次',
    api: 'renewBatch',
  },
  {
    name: '更新学校年级参加的批次',
    api: 'renewSchbatch',
  },
  {
    name: '更新家长绑定的学生',
    api: 'renewParentBatch',
  },
  {
    name: '更新参加考试的学生',
    api: 'renewBatchStudent',
  },
  {
    name: '更新pdf下载url',
    api: 'renewPdf',
  },
  {
    name: '更新调查问卷',
    api: 'renewQn',
  },
]);

const renewFunc = (api) => {
  if (api != 'renewPdf' && api != 'renewBatchStudent' && api != 'renewQn') {
    cacheFunc[api]().then((res) => {
      ElMessage({
        message: '更新成功',
        type: 'success',
      });
    });
  } else {
    show.value = true;
    diaType.value = api;
  }
};
// 更新有参数的接口
const handleRenew = (params) => {
  cacheFunc[diaType.value]({
    ...params,
  }).then((res) => {
    ElMessage({
      message: '更新成功',
      type: 'success',
    });
    closeDia();
  });
};
// 关闭弹窗
const closeDia = () => {
  show.value = false;
  diaType.value = '';
};
</script>

<style lang="scss" scoped>
.mainBox {
  height: 100%;
  overflow: auto;
}

.tableBar {
  margin-top: 2rem;

  .myTable {
    width: 100%;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    border: 1px solid #ebeef5;
  }
  td {
    height: 60px;
    line-height: 60px;
    padding: 1rem;
    border: 1px solid #ebeef5;
  }
  :deep(.btnBox) {
    text-align: center;
  }

  :deep(.firstBtn) {
    border-right: 2px solid #ebeef5;
  }
}

:deep(.el-dialog__body) {
  text-align: center !important;
}
:deep(.el-select) {
  margin-bottom: 10px;
}
:deep(.el-input) {
  width: 210px !important;
}
@import '@/assets/css/mycss.css';
</style>
